Primero el Diseño Web Móvil… ¿Estás Seguro?

El otro día me dio por curiosear en la web de un amigo, a primera vista te podía dar la impresión de estar todo correcto.. hasta que abrías la web en un smartphone con conexión 3G. El diseño podía estar muy logrado, pero para cuando cargaba la web se había acabado toda mi paciencia. De aquí que empecé a preguntarme de qué es lo más importante en eldiseño web responsive, si que el contenido se adapte al dispositivo en cuestión, o que la web cargue rápido.

Está claro que es imprescindible a estas alturas que toda web se adapte al ancho de ventana del navegador de todos los dispositivos. Pero olvidar el rendimiento web a favor de un diseño web más sofisticado no es más que un error. Quizás esto te parezca una exageración, pero con esta gráfica puedes ver que es una realidad.

Si el peso de la página aumenta, el rendimiento disminuye. Y cuantos más elementos se incluyen, más peticiones HTTP. Esto afecta en todos los aspectos, tanto cara al usuario, que se frustra y termina abandonando el sitio, como cara a Google, que te penaliza quitándote de las primeras posiciones. Que la web tarde más de 3 segundos en cargar es un problema, ya que el 40% de los usuarios se marchará si ve que no carga y el 80% directamente no volverá a entrar en nuestra página.

Primero el Diseño Web Móvil… ¿Estás Seguro?

Ethan Marcotte fue el primero en acumular el término “responsive web design”. Más tarde, Luke Wroblewski introdujo el concepto de “mobile first“. Con esto se pensó que ya era suficiente, pero se olvidó un factor muy importante: el tiempo de carga.

El diseño web responsive no tiene otro objetivo que el ofrecer una buena experiencia de usuario. En el momento que la web no carga, ya no se está ofreciendo una buena experiencia. No puede ser más fácil y sencillo. Si estoy en el metro con una conexión 3G que se me corta, perderé rápidamente la paciencia con una web que no carga. Si además insisto porque me la han recomendado y quiero ver que pone, aún me enfadaré más y finalmente pensaré que esto es una mie*da y me marcharé frustrada. De aquí que el 80% de las personas no vuelvan más a ese sitio.

Mejor prevenir que curar…

Una web que tarda en cargar es una web enferma. Y solucionar el problema una vez está hecho cuesta más que hacer las cosas bien desde el principio. No se puede comprar una plantilla web así sin más, antes hay que comprobar muchas cosas, entre ellas el tiempo de carga. Hay plantillas con un diseño fabuloso, pero que no están bien programadas y tardan mucho en cargar. Solucionar esto es más difícil y costoso que elegir una plantilla que ya esté optimizada.

Siempre nos hemos de poner en la piel del usuario. A nosotros nos puede parecer que nuestro contenido es el mejor, y a lo mejor lo es, pero para demostrarlo han de poder acceder a los mismos.. y rápido. Hay que utilizar soluciones que optimicen las imágenes, contratar un hosting en el que podamos confiar, reducir las peticiones HTTP y mucho más. Optimizar el rendimiento web hoy en día ha dejado de ser algo opcional.

Por qué es importante optimizar el rendimiento web

Veamos algunas de las razones por las que es importante optimizar el tiempo de carga y, con ello, el rendimiento web:

• Mejorar la experiencia de usuario. Todos nos hemos ido de un sitio web porque tardaba mucho en cargarse, sobre todo en dispositivos móviles. Queremos causar una impresión positiva en quien visita nuestro sitio web, no la perdamos porque la web sea lenta y no cargue rápido.
• Minimizar problemas de latencia. Con Pingdom Tools podemos comprobar gratuitamente cuánto tarda nuestro sitio web en cargarse dependiendo de la ubicación física. Veremos que si el site está en Europa, tardará más en cargarse en América y al revés. Si optimizamos la velocidad de carga, veremos una mejora sustancial en nuestros resultados en sitios lejanos a la ubicación de nuestro servidor web.
• Aumentar nuestra satisfacción personal. Cuando compruebas que tu sitio web carga mucho más rápido que los de la competencia, sientes una satisfacción única. Incluso por uno mismo, el trabajar buscando la excelencia nos convierte en mejores profesionales, y nos ayuda a ofrecer un mejor servicio a nuestros clientes.
• Incrementar nuestros ingresos. Steve Souders, gurú de la optimización web, nos explica en un vídeo de la Stanford University como la velocidad de carga influye en los ingresos del sitio web. Si, por ejemplo, buscamos clientes para nuestros proyectos freelance, y hemos creado una web con un diseño magnífico, pero que tarda en cargar, entonces perderemos potenciales clientes y, por ende, ingresos.

Buenas prácticas para optimizar el tiempo de carga

A continuación vamos a ver algunas prácticas que nos van a permitir crear sitios web de alto rendimiento:

• –Evita en la medida de los posible el uso de display:none en el CSS, ya que el usuario móvil descargará ese código aunque no lo vea, lo cual no le dará la mejor experiencia de usuario posible.
• Evita los redireccionamientos, ya que estos aumentan el tiempo de carga, un punto clave en el diseño web orientado a dispositivos móviles.
• Optimiza el número de elementos del DOM. Esto es por dos razones, primero porque cuando más elementos del DOM haya, más tardará la página web en descargarse, y segundo porque si queremos utilizar un event handler, éste tendrá que buscar mucho más en el DOM para encontrar el elemento en cuestión, perjudicando la experiencia de usuario.
• Combina las hojas de estilo CSS en una sola, así como los archivos JavaScript en uno solo, ya que esto reducirá el número de peticiones HTTP del navegador.
• Añade un expires header a tu sitio web. Lo que hace un expires header es fijar el tiempo que ha de pasar hasta que el cliente necesite de nuevo descargar un contenido de nuestra web, es decir el expires header le indica al navegador que utilice el contenido de su caché hasta la fecha marcada. Si utilizas WordPress, te recomiendo utilizar el plugin W3 Total Cache.
• Comprime los archivos con Gzip. Al loro con esta regla: no comprimas las imágenes ni los archivos pdf, porque estos de por sí ya vienen comprimidos, por lo que su nueva compresión no sólo puede incrementar el tamaño del archivo, y con ello el tiempo de carga, sino que también consume inútilmente recursos de la CPU del servidor.
• Pon las hojas de estilo CSS en el header. Hoy en día es difícil encontrar sitios web que tengan las hojas de estilo después del body, pero aun así lo cito por ser éste un punto importante. El motivo es que los navegadores esperan a haber descargado las hojas de estilo para mostrar la página web, con lo que mientras tanto se muestra una página en blanco.
• Pon los archivos JavaScript después del body. Hay algunas excepciones, cómo algunos sliders o formularios de contacto que lo requieren antes, pero como norma es mejor ponerlos después del body. La razón es que no se carga nada más hasta que finaliza la descarga del script.
• Haz externo el JavaScript y el CSS. Evita en la medida de lo posible incluir el CSS y el JavaScript en el archivo HTML. Las páginas web con los scripts y el CSS externos cargan más rápido que los que utilizan el estilo inline. El motivo principal es quelos archivos CSS y JavaScript pueden ser guardados por la caché del navegador, con lo que la segunda vez que se visita la web, no hace falta volver a descargarlos. Asimismo, reducimos el tamaño del archivo HTML y evitamos el código redundante, esto es, repetido en varias páginas web.
• Minimiza el CSS y el JavaScript. La diferencia en el tiempo de carga es notable, pues elimina todos los comentarios, espacios en blanco y saltos de línea.

Si quieres profundizar en estos puntos, te recomiendo este artículo que publiqué con lasmejores prácticas para crear un sitio web de alto rendimiento.

Si quieres aprender diseño web, te recomiendo el curso de diseño web desde cero con HTML5 y CSS3 así como el curso de diseño web responsive, con los que vas a aprender todo lo que necesitas saber sobre diseño web a nivel profesional.

Te animo a compartir el artículo y a dejar un comentario.

Un abrazo!